<template>
  <div class="week-month-switch-picker">
    <date-picker
      :type="datepickerType"
      :week-start="weekStart"
      :max="max"
      :range-single="rangeSingle"
      :color-style="colorStyle"
      :placeholder="placeholder"
      format="yyyy/MM/dd"
      v-model="rdate"
    >
      <div slot="footer" class="date-picker-footer">
        <div
          class="item"
          :class="{ active: datepickerType === 'week' }"
          @click="onChange('week')"
        >
          自然周
        </div>
        <div
          class="item"
          :class="{ active: datepickerType === 'month' }"
          @click="onChange('month')"
        >
          自然月
        </div>
      </div>
    </date-picker>
  </div>
</template>

<script>
import DatePicker from "./date-picker";
export default {
  name: "AWeekMonthSwitchPicker",
  model: {
    prop: "value",
    event: "update:value",
  },
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    weekStart: {
      type: Number,
      default: 1,
    },
    max: {
      type: [Date, String, Number],
      default() {
        // return new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
        return new Date();
      },
    },
    rangeSingle: {
      type: Boolean,
      default: true,
    },
    colorStyle: {
      type: String,
      default: "light",
    },
    placeholder: {
      type: String,
      default: "请选择时间",
    },
  },
  components: {
    DatePicker,
  },
  data() {
    return {
      datepickerType: "month",
      rdate: [],
    };
  },
  methods: {
    onChange(v) {
      // console.log('*******', type, value, src)
      this.datepickerType = v;
    },
  },
  watch: {
    value(v) {
      this.rdate = v;
    },
    rdate(v) {
      this.$emit("update:value", v);
    },
  },
};
</script>

<style lang="less" scoped>
.date-picker-footer {
  display: flex;
  padding: 0px 10px 6px 10px;
  .item {
    padding: 4px 10px;
    border: 1px solid #c2c2c2;
    margin: 0 6px;
    color: #222020;
    &.active {
      background-color: rgba(19, 125, 226, 0.07);
      color: #126ac4;
    }
  }
}
</style>
